<template>
	<!-- 自定义导航栏 -->
	<view class="custom-navigator">
		<!-- 状态栏 -->
		<status-bar></status-bar>
		<!-- 导航栏内容 -->
		<view class="navigator-content">
			<text>香哈菜谱</text>
			<text>小白学做菜必备烹饪助手</text>
		</view>
	</view>

	<!-- <up-button type="primary" :plain="true" :hairline="true" text="细边"></up-button>
	<up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button> -->

	<view class="page-container">
		<search-bar></search-bar>
		<home-banner />
		<home-menu></home-menu>
		<home-floor></home-floor>
		<home-recommend></home-recommend>
	</view>
</template>

<script setup>



</script>

<style lang="scss">
	.custom-navigator {
		background-color: $theme-color;
		background-image: url('/static/nav-bg.png');
		// background-size: 100% 100%;
		background-size: cover;
	}

	.navigator-content {
		color: #fff;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		padding: 0 32rpx;
		height: 150rpx;

		text:first-child {
			font-size: 40rpx;
		}
	}


	.page-container {
		padding: 0 32rpx;
	}
</style>